<style scoped>
.pro-con {
    padding: 0 30px;
}

.pro-card {
    margin-bottom: 10px;
}

.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.pro-card-content {
    clear: both;
}

.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.pro-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
}

.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.fr{
    float: right;
}
.mg10{
    margin-bottom: 10px;
}
</style>

<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f">
                <div class="search">
                    <Row>
                        <Col :md="24" :lg="20">
                        <!-- <span>快速搜索</span> -->
                        <Form ref="" :model="searchForm" inline>
                            <Form-item label="快速搜索">
                               
                            </Form-item>
                            <Form-item prop="user">
                                <Input type="text" v-model="searchForm.name" placeholder="代理协议名称" />
                            </Form-item>
                            <Form-item>
                                <Select v-model="searchForm.ptid" filterable placeholder="产品名称" style="width: 120px">
                                    <Option value="0">请选择</Option>
                                    <Option :value="key" v-for="(value,key) in proList" :key="key">{{value.name}}</Option>
                                </Select>
                            </Form-item>
                            <Form-item>
                                <Button type="primary" icon="ios-search" @click="search()">搜索</Button>
                            </Form-item>
                        </Form>
                        </Col>
                        <Col :md="24" :lg="4" class="pro-con-fr">
                            <Button type="primary" size="large" class="fr mg10" @click="createPro()">新增</Button>
                        </Col>
                    </Row>
                </div>
            </div>
            <Table stripe border  :columns="columns1" :data="feeList"></Table>
            
            <Row class="pro-pagesize">
                <Col span="24">
                <Page :total="listTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import productTitle from '../../components/productTitle'
import {getProListAll} from '../../api/product_v2'
import { getListAgreement,delAgreement} from '../../api/agreement'
export default {
    data() {
        return {
            columns1: [
                {
                    type: 'index',
                    title: '编号',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '代理协议名称',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '产品名称',
                    key: 'pro_name',
                    align: 'center',
                },
                {
                    title: '协议开始时间',
                    key: 'start_date',
                    align: 'center',
                },
                {
                    title: '协议结束时间',
                    key: 'stop_date',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 120,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {                                      
                                        this.toDetail(params.row.id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row.id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            feeList:[

            ],
            proList:[

            ],
            //搜索的表格数据
            searchForm: {

            }, 
            cateOneAll: [], //一级分类列表
            
            listTotal: 0, //产品总数
                                       
            page: 1,
            pagesize: 10
        };
    },
    components: {
        productTitle
    },
    computed:{
        

    },
    created() {
        this.getList()
        this.getProList()
    },
    methods: {
        //搜索
        search(){
            this.page = 1
            this.getList(); 
        },
        //获取佣金列表
        getList() {
            let _param = this.searchForm;
                _param.p = this.page;
                _param.pagesize = this.pagesize;
            new Promise((resolve, reject) => {
                getListAgreement(_param).then(response => {
                    console.log(response.data)
                    if(response.data.err == 0){
                        this.feeList = response.data.data.list
                        this.listTotal = response.data.data.total
                    } else {
                        this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //获取产品列表
        getProList() {
            new Promise((resolve, reject) => {
                getProListAll().then(response => {
                    if(response.data.err == 0){
                        this.proList = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        toDetail(id) {            
            this.$router.push({name:'agreement_update',params:{ id: id }})
        },
        remove(id) {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        "id":id
                    }
                    new Promise((resolve, reject) => {
                        delAgreement(_param).then(response => {
                            console.log(response.data)
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                this.getList() 
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                },
            });
            
        },
        createPro() {
            this.$router.push({'name':'agreement_create'});
        },
        pageSizeChange(value){
            this.pagesize = value;
            this.getList();
        },
        pageChange(value){
             this.page = value;
             this.getList();
        }
                                                                                            
    }

};
</script>
